<template>
    <div class="fullScreen">
        <m-header :msg="'绑卡'"></m-header>
        <div class="scroll-box tx-s-14 tx-c-222"> 
            <div class="flex-box flex-ac bor-b-g title-pad">
                <div class="iconSize-125 icon_card"></div>
                <div class="tx-s-14">&nbsp;&nbsp;绑定您的银行卡</div>
            </div> 
            <div class="flex-box line-box">
                <div class="title">会员账户：</div>
                <div class="flex-f1 bor-b-g">{{ $store.state.bfUserInfo.username }}</div>
            </div> 
            <div class="flex-box line-box">
                <div class="title">收款人姓名：</div>
                <div class="flex-f1 bor-b-g">
                    <input class="input-ol-n wd-fh" placeholder="请输入真实姓名"/>
                </div>
            </div>
            <div class="flex-box line-box">
                <div class="title">收款银行：</div>
                <div class="flex-f1 bor-b-g" @click="openType">{{ bank }}</div>
            </div> 
            <div class="flex-box line-box">
                <div class="title">银行账号：</div>
                <div class="flex-f1 bor-b-g">
                    <input class="input-ol-n wd-fh" type="number" placeholder="请输入银行卡号"/>
                </div>
            </div>
            <div class="flex-box line-box">
                <div class="title">开户地址：</div>
                <div class="flex-f1 bor-b-g">
                    <input class="input-ol-n wd-fh" placeholder="请输入开户地址"/>
                </div>
            </div>
            <div class="flex-box line-box">
                <div class="title">取款密码：</div>
                <div class="flex-f1 bor-b-g">
                    <input class="input-ol-n wd-fh" :type="inputType" placeholder="请输入取款密码"/>
                </div>
                <div class="flex-bap psw-but" @click="togPsw('2')"> 
                    <div :class="{
                    'psw-look' : !psdStatuas,
                    'psw-nolook' : psdStatuas,
                    }"></div>
                </div>
            </div>
            <div class="flex-box line-box">
                <div class="title">确认取款密码：</div>
                <div class="flex-f1 bor-b-g">
                    <input class="input-ol-n wd-fh" type="password" placeholder="请再次输入取款密码"/>
                </div>
            </div>
            <div class="submit-btn" @click="confirm">提交</div>
            <!-- 友情提示 -->
            <div class="marg-1">
                <div class="flex-box flex-ac">
                    <div class="icon_warning"></div>
                    <div class="tx-c-o tx-s-14">&nbsp;&nbsp;友情提示</div>
                </div>
                <div class="tx-c-666 tx-s-12 line-h">1: 银行账户持有人姓名必须与注册时输入的姓名一致，否则无法申请提款。
                    <br/>2: 每位客户只可以使用一张银行卡进行提款，如需要更换银行卡请联系在线客服进行咨询，否则提款将被拒绝。
                </div>
            </div> 
            <div v-transfer-dom>
                <popup v-model="show" position="bottom" max-height="50%">
                    <popup-header 
                        :title="'请选择银行'"
                        :show-bottom-border="false"
                        @on-click-left="show = false"
                        @on-click-right="show = false"></popup-header> 
                    <group title='' gutter='0'>
                        <radio class="tx-s-14" 
                        :selected-label-style="{color: '#d41911'}" 
                        :options="bankType"
                         @on-change="closeType"></radio>
                    </group>
                </popup>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
import 'common/css/user.css'
import MHeader from '../../components/m-header'
import Trans from '../../common/js/eventTrans'
import { bindCard } from '../../common/js/axiosUtil' 
import { bankType } from '../../common/js/data'
import { getClass } from '../../common/js/common'
import { Popup, PopupHeader, TransferDom, Radio, Group } from 'vux'
export default {
    data () {
        return {
            bank : '-请选择银行-',
            show : false,
            psdStatuas : false,
            inputType : 'password',
            bankType : bankType
        }
    }, 
    methods: { 
        togPsw () { 
            this.psdStatuas = !this.psdStatuas
            this.inputType = this.inputType === 'password' ? 'text' : 'password' 
        },
        openType () {
            this.show = true 
        },
        closeType (value, label) {
            this.show = false
            this.bank = value
        },
        confirm () {
            // 通过ClassName获取需填项
            const arr = getClass("input-ol-n")
            // 判断各项是否已填写
            if(this.$checkWrite(arr)){
                return
            }
            if(this.bank == '-请选择银行-'){
                this.$alert('请选择银行')
                return
            }
            if(arr[3].value != arr[4].value){
                this.$alert("两次输入取款密码不一致，请重新确认")
                return
            } 
            const _this = this // 需要注意 onCancel 和 onConfirm 的 this 指向
            this.$vux.confirm.show({
                // 组件除show外的属性
                content: '绑卡后不可更改，确认绑卡？',
                cancelText: '取消',
                confirmText: '绑卡',
                hideOnBlur: true,
                onCancel () {
                },
                onConfirm () {
                    _this.sendBindCard()
                }
            })
        },
        sendBindCard () { 
            let arr = getClass("input-ol-n")
            this.$toast('绑定中...', 1000000)
            let params = this.$params(1)
            params.append('payeeName', arr[0].value)
            params.append('bankName', this.bank)
            params.append('bankCard', arr[1].value)
            params.append('openingAddress', arr[2].value)
            params.append('drawPassword', arr[3].value)
            bindCard(params)
            .then((response)=> { 
                this.$toastClose()
                if(response.data.code == "200"){ 
                    const {data} = response.data
                    // 更新SET_USERINFO数据
                    this.$store.commit('SET_USERINFO', data) 
                    this.$router.replace('/bindingCardResult')
                } else {
                    this.$logAgain(response.data.msg)
                }
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            })
        }
    },
    directives: {
        TransferDom
    },
    components: {
        MHeader,
        Popup,
        PopupHeader,
        Radio, 
        Group
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus"> 
@import "~common/stylus/variable"
    .scroll-box
        position: fixed
        width: 100%
        top: 2.75rem
        bottom: 0
        background: white
        overflow: auto
    .scroll-box::-webkit-scrollbar
        display: none
    .icon_card 
        background-image: url('../../common/image/tx_bd.png') 
    .line-box
        padding: .5rem 1rem
        line-height: 2rem
    .title-pad
        margin: 0 1rem
        padding: .75rem 0
    .title
        width: 6.5rem
        text-align: right
        padding-right: .5rem
    .line-h
        line-height : 1.125rem
        margin-top : .75rem
    .psw-but
        height : 2rem
        width : 2rem
        border-bottom : 1px solid $color-f0
</style>

